@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-padding-top: 5rem;
    scroll-behavior: smooth;
  }
}

/* 代码块样式 */
pre {
  @apply p-4 rounded-lg mb-4 mt-0 relative;
  background-color: #0d1117 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 确保代码不会换行 */
pre code {
  @apply font-mono text-sm whitespace-pre;
  background: none !important;
  word-wrap: normal;
  word-break: normal;
}

/* 内联代码样式 */
:not(pre) > code {
  @apply bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-gray-900 dark:text-gray-100;
}

/* 代码块容器 */
.code-block {
  @apply relative mt-4 overflow-hidden;
  background: linear-gradient(to right, #0d1117 30%, rgba(13, 17, 23, 0.8) 100%);
}

/* 代码块头部 */
.code-header {
  @apply absolute right-2 top-2 flex items-center px-4 justify-between space-x-2 opacity-0 transition-opacity z-50;
  position: sticky;
  background-color: rgba(13, 17, 23, 0.8);
  backdrop-filter: blur(4px);
}

.code-block:hover .code-header {
  @apply opacity-100;
}

.code-language {
  @apply text-xs text-gray-400 bg-gray-800 px-2 py-1 rounded;
}

.copy-button {
  @apply text-gray-400 hover:text-white bg-gray-800 p-1.5 py-0 rounded transition-colors;
}

.copy-button[data-copied="true"] {
  @apply text-green-400;
}

/* 滚动条样式 */
.code-block pre::-webkit-scrollbar {
  @apply h-2 bg-transparent;
}

.code-block pre::-webkit-scrollbar-thumb {
  @apply bg-gray-700 rounded-full;
}

.code-block pre::-webkit-scrollbar-track {
  @apply bg-transparent;
}

/* 为标题添加锚点样式 */
.prose h2,
.prose h3 {
  scroll-margin-top: 5rem;
  position: relative;
}

.prose h2:hover .anchor,
.prose h3:hover .anchor {
  opacity: 1;
}

.prose .anchor {
  opacity: 0;
  position: absolute;
  left: -1em;
  text-decoration: none;
  transition: opacity 0.2s;
}

/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
  @apply w-1.5 bg-transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-600 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400 dark:bg-gray-500;
}

.custom-scrollbar::-webkit-scrollbar-track {
  @apply bg-transparent;
}

/* 在悬停时显示滚动条 */
.custom-scrollbar {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: theme('colors.gray.300') transparent; /* Firefox */
}

.dark .custom-scrollbar {
  scrollbar-color: theme('colors.gray.600') transparent; /* Firefox dark mode */
}

/* 在暗色模式下的滚动条样式 */
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-gray-600;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}
 